
body {
    -webkit-user-select: none;
    user-select: none ;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 80%;
    background-color: #F0F0F0 ;
    color: #333333 ;
    text-align: center;
    padding: 6px 24px ;
    overflow: hidden ;
}

* {
    cursor: default;
}

button:focus {
    outline: none;
}

#dims {
    text-align: left ;
    display: flex ;
    justify-content: space-between;
    margin-bottom: 4px ;
}

#dims div {
    white-space: nowrap;
    overflow: hidden;
}

#title {
    max-width: 180px ;
    text-overflow: ellipsis;
    font-weight: bold;
}

#path-container {
    margin-top: 8px ;
    text-align: center;
}

#saveto {
    text-align: left ;
    margin-bottom: 4px ;
}

#path-browse {
    display: flex ;
}

#path, #browse {
    height: 24px ;
}

#path {
    flex-grow: 1 ;
    box-sizing: border-box;
    background-color: #FFFFFF ;
    border: 1px solid #AAAAAA ;
    padding: 3px 12px ;
}

#browse {
    border: transparent ;
    background-color: transparent ;
    background-image: url(assets/place-browse.svg);
    background-repeat: no-repeat;
    background-position: left 6px center;
    background-size: auto 80% ;
    margin-left: 2px ;
    padding-left: 30px ;
}

#browse:hover {
    background-color: #DBE4F3 ;
}

#prompt {
    margin-top: 12px ;
}

#record.saving {
    color: white ;
    transition: unset ;
}

#record {
    margin-top: 14px ;
    width: 60px ;
    height: 60px ;
    border: none ;
    border-radius: 30px ;
    background-color: #AA0000 ;
    color: #AA0000 ;
    transition: .1s all ;
}

#record:not(.saving):hover {
    background-color: #CC0000 ;
    color: #CC0000 ;
}

#record:not(.saving):active {
    background-color: #EE0000 ;
    color: #EE0000 ;
}
